<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '登录',
  },
}
</route>

<template>
  <view class="min-h-screen bg-gray-50 px-4 py-12">
    <!-- 标题区域 -->
    <view class="text-center mb-8">
      <view class="text-2xl font-bold mb-2">智慧社区服务</view>
      <view class="text-gray-500">让家、让生活更便捷</view>
    </view>

    <!-- 登录表单 -->
    <view class="space-y-4">
      <!-- 手机号输入框 -->
      <view class="flex items-center bg-white rounded-lg px-4 h-12">
        <uni-icons type="phone" size="20" color="#666"></uni-icons>
        <input type="text" v-model="phone" placeholder="请输入手机号" class="flex-1 ml-2" />
      </view>

      <!-- 密码输入框 -->
      <view class="flex items-center bg-white rounded-lg px-4 h-12">
        <uni-icons type="locked" size="20" color="#666"></uni-icons>
        <input
          type="password"
          v-model="password"
          placeholder="请输入密码"
          password
          class="flex-1 ml-2"
        />
      </view>

      <!-- 忘记密码 -->
      <view class="flex justify-end">
        <text class="text-blue-600 text-sm" @click="onForgotPassword">忘记密码</text>
      </view>

      <!-- 登录按钮 -->
      <button
        class="w-full h-12 bg-blue-600 text-white rounded-lg text-lg font-medium mt-8 flex items-center justify-center"
        @click="handleLogin"
      >
        登录
      </button>

      <!-- 协议勾选 -->
      <view class="flex items-center justify-center mt-4">
        <checkbox
          :value="'1'"
          :checked="agreeProtocol"
          @tap="handleCheckboxChange"
          class="transform scale-75"
        />
        <text class="text-sm text-gray-600 ml-1">
          我已阅读并同意
          <text class="text-red-500">《隐私协议》</text>
          和
          <text class="text-red-500">《用户协议》</text>
        </text>
      </view>

      <!-- 商家入驻按钮 -->
      <view class="mt-8">
        <button
          class="w-full h-12 bg-white border border-gray-200 rounded-lg flex items-center justify-center"
          @click="onMerchantRegister"
        >
          <image
            class="w-6 h-6 mr-2"
            src="https://kuaidi.trio.pub/upload/uniapp/delivery/shangjiaruzhu.png"
            mode="aspectFit|aspectFill|widthFix"
          ></image>
          <text class="text-gray-700">商家入驻</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { login } from '@/service/index/foo'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const phone = ref('')
const password = ref('')
const agreeProtocol = ref(false)

const handleLogin = async () => {
  if (!phone.value || !password.value) {
    uni.showToast({
      title: '请输入手机号和密码',
      icon: 'none',
    })
    return
  }

  if (!agreeProtocol.value) {
    uni.showToast({
      title: '请先同意协议',
      icon: 'none',
    })
    return
  }

  try {
    uni.showLoading({ title: '登录中...' })

    const res = await login({
      mobile: phone.value,
      password: password.value,
    })

    uni.hideLoading()

    if (res.code === 0) {
      // 保存token到本地存储
      uni.setStorageSync('token', res.data.token)

      // 更新用户信息到store
      userStore.setUserInfo({
        ...res.data,
        token: res.data.token,
      })

      uni.showToast({
        title: '登录成功',
        icon: 'success',
        mask: true,
        duration: 1500,
      })

      setTimeout(() => {
        uni.switchTab({
          url: '/pages/index/index',
        })
      }, 1000)
    } else {
      uni.showToast({
        title: res.data || res.message || '登录失败',
        icon: 'none',
        duration: 2000,
      })
    }
  } catch (error) {
    uni.hideLoading()
    console.error('登录失败:', error)
    uni.showToast({
      title: '登录失败，请稍后重试',
      icon: 'none',
      duration: 2000,
    })
  }
}

const onForgotPassword = () => {
  uni.navigateTo({
    url: '/pages/forgotPassword/index',
  })
}

const onMerchantRegister = () => {
  console.log('商家入驻')
  uni.navigateTo({
    url: '/pages/register/index',
  })
}

const handleCheckboxChange = () => {
  agreeProtocol.value = !agreeProtocol.value
  console.log('checkbox changed:', agreeProtocol.value)
}
</script>

<style scoped>
page {
  background-color: #f9fafb;
}
</style>
